<!--
 * @Description: 
 * @Author: @yangwenshan
 * @since: 2021-05-13 15:36:56
 * @LastAuthor: @yangwenshan
 * @lastTime: 2021-05-19 16:57:48
-->
<template>
  <a-drawer title="批量添加题目" width="35%" placement="right" :visible="visible" @close="onClose">
    <a-spin tip="数据加载中" :spinning="loading">
      <a-form
        :form="form"
        @submit="handleSubmit"
        layout="horizontal"
        :labelCol="{ span: 3 }"
        :wrapperCol="{ span: 21 }"
      >
        <a-form-item label="">
          请参考<a href="https://minio.lan123.top/ques/%E4%B8%8A%E4%BC%A0%E7%A4%BA%E4%BE%8B.xls">
            示例文件，点击可下载
          </a>
        </a-form-item>
        <a-form-item label="excel文件">
          <div class="clearfix">
            <a-upload
              list-type="picture-card"
              :file-list="fileList"
              accept=".xlsx,.xls"
              :before-upload="beforeUpload"
              :remove="handleRemove"
              v-decorator="[
                'excel_url',
                {
                  initialValue: fileList,
                  rules: [
                    {
                      required: true,
                      message: '请上传excel文件',
                    },
                  ],
                },
              ]"
            >
              <div v-if="fileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
          </div>
        </a-form-item>
        <a-form-item label="题目分类">
          <a-select
            show-search
            v-decorator="[
              'type',
              {
                initialValue: data.type,
                rules: [{ required: true, message: '请输入题目分类' }],
              },
            ]"
            placeholder="请搜索题目分类"
            style="width: 100%"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="fetching ? undefined : null"
            @search="handleSearchType"
            @change="handleChange"
          >
            <a-spin v-if="fetching" slot="notFoundContent" size="small" />
            <a-select-option v-for="item in typeList" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 3 }">
          <a-button type="primary" html-type="submit" :loading="confirmLoading"> 开始任务 </a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-drawer>
</template>
<script>
import { addTask } from '@/api/batchAddTask'
import { getTypeList } from '@/api/questionType'
import request from '@/utils/request'
export default {
  data() {
    return {
      data: {},
      visible: false,
      form: this.$form.createForm(this),
      loading: false,
      fetching: false,
      confirmLoading: false,
      fileList: [],
      typeList: [],
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
      this.searchTypeRequest()
    },
    onClose() {
      this.data = {}
      this.visible = false
    },
    handleRemove() {
      this.fileList = []
    },
    beforeUpload(file) {
      this.handleUpload(file)
      return false
    },
    handleUpload(file) {
      const formData = new FormData()
      formData.append('picture_byte', file)
      this.$message.info('上传中...')
      this.confirmLoading = true
      request.post('/picture/upload/', formData).then((res) => {
        this.fileList.push({
          uid: new Date().getTime(),
          name: 'image',
          status: 'done',
          url: res.img_url,
        })
        this.$message.success('上传成功')
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    searchTypeRequest(name) {
      this.fetching = true
      getTypeList({ name: name, page: 1, page_size: 10 })
        .then((res) => {
          this.typeList = res.data
        })
        .finally(() => {
          this.fetching = false
        })
    },
    handleSearchType(value) {
      this.searchTypeRequest(value)
    },
    handleChange(value) {
      this.searchTypeRequest(value)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          let data = {
            excel_url: this.fileList[0].url,
            type: values.type,
          }
          addTask(data)
            .then(() => {
              this.$message.success('批量上传题目成功')
              this.fileList = []
              this.form.resetFields()
              this.visible = false
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>
